<template>
	<view class="">
		<shopList :visible="active === 0" :scrollHeight=scrollHeight >

		</shopList>
		<cart :visible="active === 1" :height=height >
			
		</cart>
		
		<user :visible="active === 2"  >
			
		</user>

		<hans-tabber :list="list" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange">
		</hans-tabber>
	</view>
</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	import shopList from '@/pages/shopList/shopList'
	import cart from '@/pages/cart/cart'
	import user from '@/pages/user/user'

	export default {
		components: {
			hansTabber,
			shopList,
			cart,
			user
		},
		data() {
			return {
				active:0,
				list: [{
						"text": "购买服务",
						"iconPath": '../../static/images/tabbar/buy_list.png',
						"selectedIconPath": '../../static/images/tabbar/buy_list_active.png'
					},
					{
						"text": "购物车",
						"iconPath": '../../static/images/tabbar/cart.png',
						"selectedIconPath": '../../static/images/tabbar/cart_active.png'
					},
					{
						"text": "个人中心",
						"iconPath": '../../static/images/tabbar/user.png',
						"selectedIconPath": '../../static/images/tabbar/user_active.png'
					}
				],
				height:0,
				scrollHeight:0
			}
		},
		onReady() {
			let that=this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					that.height=that._data.pH*2*0.68
					that.scrollHeight = that._data.pH*2*0.50
					
					// let titleH=uni.createSelectorQuery().select(".tabbar"); //想要获取高度的元素名（class/id）
					// titleH.boundingClientRect(data=>{
					// 	let pH=that._data.pH; 
					// 	that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					// }).exec()
					// let product=uni.createSelectorQuery().select(".product"); //想要获取高度的元素名（class/id）
					// product.boundingClientRect(data =>{
					// 	that.topTab = data.top
					// 	console.log("顶部tab高度"+data.top)
					// }).exec()
					// that.height = that.pH - that.navHeight-that.topTab*3
					// console.log(that.height)
				}
			})
		},
		
		onLoad() {},
		methods: {
			tabChange(index) {
				this.active = index
			}
		}
	}
</script>

<style>
</style>
